<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员界面</title>
    <script src="../js/vue.min.js"></script>
    <link rel="stylesheet" href="../elementUI/index.css">
    <script src="../elementUI/index.js"></script>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <!-- <link rel="stylesheet" href="../css/sms.css"> -->
    <script src="../js/alldatas.js"></script>
    <script src="../js/axios.min.js"></script>
    <style>
        body {
            background: url(../img/3.jpg);
            margin: 0;
        }

        .ap {
            width: 1700px;
            height: 700px;
            background: rgb(204, 199, 210, 0.3);
            border: solid 2px;
            margin: 0px 107px;
        }

        h2 {
            width: 1915px;
            font-size: 50px;
            text-align: center;
            color: aliceblue;
        }

        #btn {
            font-size: 20px;
            position: relative;
            top: -10px;
            left: 1450px;
        }

        .el-dialog {
            position: relative;
            width: 960px;
        }

        #tb {
            position: relative;
            top: 80px;
            left: 150px
        }

        #submit {
            position: relative;
            top: 5px;
            left: 550px
        }

        #reset {
            position: relative;
            top: 5px;
            left: 580px
        }
    </style>
</head>

<body>
<h2>管理员管理界面</h2>
<div id="app" class="ap">
    <el-table :data="forms.ruleForm" stripe style="width: 1200px" id="tb">
        <el-table-column prop="name" label="姓名" width="400">
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="400">
        </el-table-column>
        <el-table-column prop="password" label="密码" width="400">
        </el-table-column>
    </el-table>

    <el-button type="primary" @click="visible = true" id="btn">添加用户</el-button>
    <el-dialog :visible.sync="visible" title="添加新用户">
        <el-form :model="forms.newUser" status-icon ref="forms" label-width="100px" class="demo-ruleForm">
            <el-form-item label="姓名：" prop="name">
                <el-input placeholder="请输入姓名" type="text" v-model="forms.newUser.name" clearable
                          style="width: 700px;"></el-input>
            </el-form-item>
            <el-form-item label="账户：" prop="username">
                <el-input placeholder="请输入用户名" type="text" v-model="forms.newUser.username" clearable
                          style="width: 700px;"></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="password">
                <el-input placeholder="请输入密码" type="password" v-model="forms.newUser.password" show-password
                          style="width: 700px;"></el-input>
            </el-form-item>
            <el-form-item label="身份：" prop="value" value="value">
                <el-select v-model="forms.newUser.value" placeholder="请选择" style="width: 700px;">
                    <el-option v-for="item in forms.options" :key="item.value" :label="item.label"
                               :value="item.value" :disabled="item.disabled">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('forms')" id="submit">提交</el-button>
                <el-button @click="resetForm('forms')" id="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>
<script>
    var v1 = new Vue({
        el: "#app",
        data: {
            allA: allAdmin,
            allT: alltt,
            allS: allss,
            visible: false,
            forms: {
                newUser: {
                    name: "",
                    username: "",
                    password: "",
                    value: ''
                },
                ruleForm: [],
                options: [{
                    value: '1',
                    label: '教师'
                }, {
                    value: '2',
                    label: '学生',
                }, {
                    value: '3',
                    label: '管理员',
                    disabled: true
                }]
            }
        },
        methods: {
            submitForm(formName) {
                if (this.forms.newUser.name == "") {
                    this.$message({
                        message: '请输入姓名',
                        type: 'warning'
                    });
                } else if (this.forms.newUser.username == "") {
                    this.$message({
                        message: '请输入用户名',
                        type: 'warning'
                    });
                } else if (this.forms.newUser.password == "") {
                    this.$message({
                        message: '请输入密码',
                        type: 'warning'
                    });
                } else if (this.forms.newUser.value == "") {
                    this.$message({
                        message: '请选择身份',
                        type: 'warning'
                    });
                }

                if (this.forms.newUser.value == 1) {
                    for (i in allTeacher) {
                        if (this.forms.newUser.username == allTeacher[i].username) {
                            this.$message({
                                message: '用户名已存在',
                                type: 'warning'
                            });
                            return;
                        }
                    }
                    this.visible = false
                } else if (this.forms.newUser.value == 2) {
                    for (i in allStudent) {
                        if (this.forms.newUser.username == allStudent[i].username) {
                            this.$message({
                                message: '用户名已存在',
                                type: 'warning'
                            });
                            return;
                        }
                    }
                    this.visible = false
                }
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    })

    var allss = {}
    for (i in allStudent) {
        // console.log(i.sname)
        allss[i] = [allStudent[i].sname, allStudent[i].username, allStudent[i].password]

    }

    console.log(allss)
    var alltt = {}
    for (i in allTeacher) {
        // console.log(i.sname)
        alltt[i] = [allTeacher[i].tname, allTeacher[i].username, allTeacher[i].password]
    }
    console.log(alltt)
</script>

</html>